import type { FormRules } from 'element-plus'

// tab选项
export interface ITabItem {
  path: string
  title: string
}

// 对话框和抽屉布局
export interface IDialogAndDrawerLayout {
  title?: string // 左上角标题
  modal?: boolean // 是否需要遮罩层
  showClose?: boolean // // 是否显示右上角关闭图标
  alignCenter?: boolean // 是否居中(dialog特有)
  direction?: any // 方向（抽屉特有）
  // 尺寸
  size?: string // 抽屉
  width?: string // 对话框
  // 点击外面遮罩层是否可关闭对话框
  closeOnClick?: boolean // dialog
  closeOnClickModal?: boolean // 抽屉
}

// ========================= 表单相关 ================================
export type SizeType = 'small' | 'default' | 'large'

export interface IOptionItem {
  label?: string
  value?: any
}

export interface ILyFormLayout {
  isShowBtns?: boolean
  labelWidth?: string // 左边文字宽度
  size?: SizeType // 表单大小
  xs?: number // <768, 下面三个主要是是给弹框内表单布局用的
  sm?: number // >768
  md?: number //> 992
}

// select的远程搜索配置
export interface ISelectFilterSearch {
  filterable: boolean
  filterMethod?: (str: string) => void
}

// 重要！！！后续完善大部分在这里
export interface ILyFormItem {
  type:
    | 'input' // 普通文本框
    | 'password' // 密码框
    | 'select' // 下拉框
    | 'date-picker' // 时间选择区间
    | 'date-time-picker' // 时间选择器
    | 'textarea' // 文本框
    | 'img' // 图片
    | 'radio' // 单选框
    | 'custom' // 自定义类型-也就是可以传插槽
  isBannedTime?: boolean // 是否为封禁时间类型
  prop?: string // 属性名，跟服务器要传的参数有关
  label?: string // 表单前的文字
  rows?: number // 多选框行数
  span?: number // 当前的item占多少份，如果是弹框内的表单用span调整一行多少个不要用上面的xs,sm,md
  placeholder?: string // 占位文字
  size?: SizeType // 当前表单item的尺寸
  options?: IOptionItem[] // 下拉框的数据
  filterSearch?: ISelectFilterSearch // select的筛选搜索配置
  slotName?: string // 插槽名字

  required?: boolean // 是否必传
}

// 表单全类型
export interface ILyForm {
  layout?: ILyFormLayout
  items: ILyFormItem[] //这里最好细分，限制类型
  rules?: FormRules
}

// ======================== 表单结束 ==========================

// ==================== modal配置项类型 ========================
export interface IModalConfig {
  pageName?: string // 重要！页面名字
  type: 'dialog' | 'drawer' // 重要！代表当前的表单应用于高级搜索还是弹框里面，这两个效果区别有点大
  layout: IDialogAndDrawerLayout // 这个layout是对上面type来说的，布局属性跟type类型的属性有关
  form?: ILyForm
}

// ========================== modal结束  ========================

// ========================== page-header ========================
export interface IPageHeaderConfig {
  pageName: string
  form: ILyForm
}

// ========================== page-header结束 ========================

// ==================== Page-content相关 ========================
export interface IBatchBtn {
  // 分别为 ‘批量封禁’ ‘批量禁止’ ‘批量删除’ '批量通过'按钮
  type: 'batchBanned' | 'batchUniteDisable' | 'batchDelete' | 'batchPass'
  label?: string // 按钮文字
}

// 分别为 ‘编辑’ ‘删除’ ‘强制下线’ ’重置密码‘ '分配权限' ‘通过’ ‘驳回’ ‘详情’按钮类型
export type SingleBtnType =
  | 'add'
  | 'edit'
  | 'delete'
  | 'kickout'
  | 'resetPwd'
  | 'permissions'
  | 'pass'
  | 'reject'
  | 'detail'
  | 'setRole'
  | 'rowAdd'

export interface ISingleBtn {
  type: SingleBtnType
  label?: string // 按钮文字
}

export interface ITableLayout {
  border?: boolean // 表格是否带边框
  height?: number // 固定表头的高度
  size?: 'large' | 'small' | 'default' // 表格大小
  stripe?: boolean //	是否为斑马纹 table
}

export interface ITableItem {
  type?: 'selection' | 'index' | 'custom' | 'operation' | 'expand'
  slotName?: string
  prop?: string // 属性名称
  label?: string // 显示的文字
  width?: string | number //宽度
  minWidth?: string | number //宽度
  align?: 'left' | 'center' | 'right' // 对齐方式
  showOverflowTooltip?: boolean // 内容太多隐藏
  fixed?: 'left' | 'right' // 左边或者右边固定
  btns?: ISingleBtn[] // 单操作按钮
}

// ==================== table结束 ========================

// 请求页面数据参数
// export interface IPageDataQuerys {
//   current: number
//   size: number
//   userName?: string
//   userPhone?: string
//   status?: number
// }

// page-content数据
export interface IPageContentConfig {
  pageName: string
  layout?: ITableLayout
  batchBtns?: IBatchBtn[]
  items: ITableItem[]
}
